<template>
	<div class="event-section">
		<div class="map-section" id="mapContainer"></div>
		<div class="event-main">
			<div class="top-bar">
				<div class="sort-list">
					<span class="active">发布时间</span>
					<span>反馈时间</span>
				</div>
				<div class="filter-item">
					<span>筛选</span>
					<i class="iconfont icon-filter"></i>
				</div>
			</div>
			<div class="event-content">
				<div :class="['event-list',eventListType]">
					<div v-if="eventListType==='single'" class="event-single">
						<div class="list-btn" @click="handleListTypeTab('list')">
							<i class="iconfont icon-list"></i>
						</div>
						<van-swipe 
							class="my-swipe"
							:loop="false"
							:show-indicators="false"
							ref="mySwipe"
							:initial-swipe="currentIndex"
							@change="handleSwipeChange"
						>
							<van-swipe-item 
								v-for="item in eventList" 
								:key="item.etId">
								<div class="event-item" @click="handleEventItemClick(item)">
									<div class="title">
										<span>{{item.etName}}</span>
										<b v-if="item.etTypeName">{{item.etTypeName}}</b>
									</div>
									<div class="content">
										<div class="status">
											<i class="iconfont icon-alarm"></i>
											<div :class="['process',`process${item.etAttribute}`]">
												<b v-for="item in 10" :key="item"></b>
											</div>
											<!-- 0普通，1一般，2紧急 -->
											<span>{{eventAttr[item.etAttribute]}}</span>
										</div>
										<div class="detail">
											<span class="date"><i></i><b>{{item.createtime}}</b></span>
											<span class="username"><i></i><b>{{item.creator}}</b></span>
										</div>
									</div>
								</div>
							</van-swipe-item>
						</van-swipe>
					</div>
					<div v-else class="events">
						<div class="single-btn" @click="handleListTypeTab('single')">
							<i class="iconfont icon-arrow"></i>
						</div>
						<div class="events-main">
							<van-pull-refresh
								v-if="eventList.length"
								class="refresh-section"
								v-model="isPullLoading" 
								@refresh="onRefresh"
							>
								<van-list
									v-model="listLoading"
									:finished="eventListFinished"
									finished-text="这就是我的底线"
									@load="onLoad"
								>
									<div 
										class="event-item" 
										v-for="item in eventList" 
										:key="item.name"
										@click="handleEventItemClick(item)"
									>
										<div class="title">
											<span>{{item.etName}}</span>
											<b v-if="item.etTypeName">{{item.etTypeName}}</b>
										</div>
										<div class="content">
											<div class="status">
												<i class="iconfont icon-alarm"></i>
												<div :class="['process',`process${item.etAttribute}`]">
													<b v-for="item in 10" :key="item"></b>
												</div>
												<span>{{eventAttr[item.etAttribute]}}</span>
											</div>
											<div class="detail">
												<span class="date"><i></i><b>{{item.createtime}}</b></span>
												<span class="username"><i></i><b>{{item.creator}}</b></span>
											</div>
										</div>
									</div>
								</van-list>
							</van-pull-refresh>
							<van-empty v-else description="没啥急事,先歇会吧" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<van-popup v-model="detailShow" round position="bottom" :style="{ height: '80%' }" >
			<div class="event-detail">
				<div class="detail-content">
					<!-- 标题 -->
					<div class="title">
						<span>{{currentEvent.etName}}</span>
						<b v-if="currentEvent.etTypeName">{{currentEvent.etTypeName}}</b>
					</div>
					<!-- 状态 -->
					<div class="status">
						<i class="iconfont icon-alarm"></i>
						<div :class="['process',`process${currentEvent.etAttribute}`]">
							<b v-for="item in 10" :key="item"></b>
						</div>
						<span>{{eventAttr[currentEvent.etAttribute]}}</span>
					</div>
					<!-- 详情 -->
					<div class="detail">
						<span class="date"><i></i><b>{{currentEvent.createtime}}</b></span>
						<span class="username"><i></i><b>{{currentEvent.creator}}</b></span>
					</div>
					<!-- 事件描述 -->
					<div class="scroll-main">
						<div class="sub-title">
							<span>事件描述</span>
						</div>
						<p>{{currentEvent.etContent||"无"}} </p>
						<!-- 社区反馈 -->
						<div class="sub-title">
							<span>社区反馈</span>
						</div>
						<van-steps 
							direction="vertical"
							active="false"
							v-if="currentEvent.feedbackList?currentEvent.feedbackList.length:false"
						>
							<van-step 
								v-for="item in currentEvent.feedbackList"
								:key="item.efId"
							>
								<div class="feedback-item">
									<h3>{{item.createtime}}</h3>
									<p>{{item.efContent}}</p>
								</div>
							</van-step>
						</van-steps>
						<div v-else>无</div>
						<!-- 所属网格 -->
						<div class="sub-title">
							<span>所属网格</span>
						</div>
						<p>{{currentEvent.gridName||"无"}}</p>
						<!-- 所属社区 -->
						<div class="sub-title">
							<span>所属小区</span>
						</div>
						<p>{{currentEvent.parkName||"无"}}</p>
						<!-- 网格员 -->
						<div class="sub-title">
							<span>事件相关人</span>
						</div>
						<ul class="employes">
							<li>
								<span>姓名:{{currentEvent.etPerson||"无"}}</span>
								<span>电话:{{currentEvent.etTel||"无"}}</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex'
import {
	getEventList,
	getEventDetail
} from "../../request/api"
export default {
	name:'',
	components: {},
	data() {
		return {
				isPullLoading: false,
				listLoading: false,
				detailShow: false,
				mapInstance: null,
				eventListType: "single", // single,list
				swipeTimer:null,
				markerIcon:require("../../assets/images/icon-marker.png"),
				markerIconActive:require("../../assets/images/icon-marker-active.png"),
				currentEvent:{},
				markerList:[],
				currentIndex:0, //当前选中事件
				eventListFinished: false,
				pagination:{
					page:1,
					pageSize:10,
					pages:0,
					total:0
				},
				eventAttr:{
					"0":"普通",
					"1":"一般",
					"2":"紧急",
				}
		};
	},
	computed:{
		...mapState({
			eventList: state=>state.event.eventList
		})
	},
	watch:{
		eventList:function(value){
			if(!value.length) return;
			this.handleRenderMarkers(value)
		}
	},
	mounted(){
		this.initialMap()
		this.getEventListData({
			page:1,
			pageSize:this.pagination.pageSize
		})
	},
	methods: {
		// 下拉刷新
		async onRefresh(){
			this.currentIndex = 0
			await this.getEventListData({
				page:1,
				pageSize:this.pagination.pageSize
			})
			this.isPullLoading = false
		},
		// 上拉加载
		onLoad(){
			if(this.pagination.page===1) return
			this.getEventListData({
				page:this.pagination.page+1,
				pageSize:this.pagination.pageSize
			})
		},
		// 初始化地图
		initialMap(){
			const mapCenterPoint = new window.BMapGL.Point(123.471705,41.683169)
			this.mapInstance = new window.BMapGL.Map("mapContainer",{
				enableRotate: false,
				enableTilt: false
			});
			this.mapInstance.centerAndZoom(mapCenterPoint, 11);
			this.mapInstance.enableScrollWheelZoom(true);
		},
		// 事件列表及单项切换
		handleListTypeTab(type){
			this.eventListType = type
		},
		// 事件点击查看详情
		async handleEventItemClick(item){
			const res = await getEventDetail({
				etId:item.etId
			})
			this.currentEvent = res.data
			this.detailShow = true
		},
		// 渲染marker
		handleRenderMarkers(eventList){
			// console.log("handleRenderMarkers",eventList)
			this.mapInstance.clearOverlays()
			let points = []
			
			this.markerList = []
			eventList.forEach((item,index)=>{
				this.handleAddMarker(item,index)
				let pos = new window.BMapGL.Point(item.etAdd.lng, item.etAdd.lat)
				points.push(pos)
			})
			this.mapInstance.setViewport(points)
		},
		// 添加marker
		handleAddMarker(item,index){
			const $this = this
			const myIcon = this.handleCreatMarkerIcon(index!==this.currentIndex?this.markerIcon:this.markerIconActive)
			const marker = new window.BMapGL.Marker(new window.BMapGL.Point(...item.location),{
				icon: myIcon
			});
			marker.name = item.name
			// console.log(marker)
			$this.mapInstance.addOverlay(marker);
			marker.addEventListener('click', function(){
				$this.handleSwipeToCurrent(item)
			});
			this.markerList.push(marker)
		},
		// 创建图标对象
		handleCreatMarkerIcon(icon){
			return new window.BMapGL.Icon(icon, new window.BMapGL.Size(30, 30))
		},
		// swipe切换到指定项
		handleSwipeToCurrent(item){
			let index = 0;
			this.eventList.forEach((current,ind)=>{
				if(item.etId === current.etId){
					index = ind
				}
			})
			this.$refs.mySwipe.swipeTo(index)
		},
		// 监听swipe切换
		handleSwipeChange(index){
			// marker切换样式
			this.markerList[this.currentIndex].setIcon(this.handleCreatMarkerIcon(this.markerIcon)) //修改marker为普通状态
			this.markerList[index].setIcon(this.handleCreatMarkerIcon(this.markerIconActive)) //修改marker为选中状态
			this.currentIndex = index
			this.handleCenterAndZoom(this.eventList[index])

			// 请求数据
			const length = this.eventList.length
			if(index === length-1){
				this.getEventListData({
					page:this.pagination.page+1,
					pageSize:this.pagination.pageSize
				})
			}
		},
		// 地图锁定指定事件
		handleCenterAndZoom(item){
			const $this = this
			clearTimeout($this.swipeTimer)
			$this.swipeTimer = setTimeout(()=>{
				const point = new window.BMapGL.Point(...item.location);
				$this.mapInstance.centerAndZoom(point, 16);
			},1000)
		},
		// 获取事件列表数据
		async getEventListData(pagination){
			if(pagination.page===1){
				this.eventListFinished = false
			}
			if(this.eventListFinished) return
			const res = await getEventList({
				...pagination,
				etNature:0
			})
			if(!res) return
			
			const resData = res.data

			// 修改分页数据
			this.pagination.page = resData.page
			this.pagination.pages = resData.pages
			this.pagination.total = resData.total
			// 修改vuex数据
			this.$store.commit("event/setEventList",{
				type:resData.page===1?"initial":"add",
				data:resData.data.map(item=>{
					// console.log(JSON.parse(item.etAdd))
					const etAdd = JSON.parse(item.etAdd)
					return {
						...item,
						etAdd,
						location:[etAdd.lng,etAdd.lat]
					}
				})
			})

			this.listLoading = false;

			// 判断是否请求全部数据
			this.eventListFinished = (resData.page === resData.pages)
		}
	}
}
</script>
<style scoped lang="scss">
@import "../../assets/style/variable.scss";
.process{
	b{
		background: #E5E5E5;
	}
	&.process1{
		b{
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(3),
			&:nth-child(4),
			&:nth-child(5){
				background: #F45656;
			}
		}
	}
	&.process2{
		b{
			background: #F45656;
		}
	}
}
.event-item{
	width: 100%;
	background: #fff;
	border-radius: 10px;
	padding: 0 40px;
	.title{
		height: 100px;
		@include flexCenter;
		justify-content: flex-start;
		border-bottom: 1px solid #E5E5E5;
		span{
			font-size: 36px;
			font-weight: bold;
		}
		b{
			font-size: 20px;
			color: #fff;
			background: $color-blue;
			padding: 2px 10px;
			border-radius: 8px;
			margin-left: 10px;
		}
	}
	.content{
		.status{
			margin: 30px 0;
			@include flexCenter;
			justify-content: flex-start;
			i{
				font-size: 30px;
				position: relative;
				top: -3px;
			}
			.process{
				@include flexCenter;
				margin: 0 10px;
				b{
					width: 4px;
					height: 20px;
					margin: 0 2px;
					transform: rotate(30deg);
				}
			}
			span{
				font-size: 24px;
			}
		}
		.detail{
			padding-bottom: 30px;
			@include flexCenter;
			justify-content: flex-start;
			span{
				margin-right: 50px;
				font-size: 22px;
				@include flexCenter;
				i{
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
				b{
					font-weight: normal;
				}
				&.date{
					i{
						background: url(../../assets/images/icon-date@2x.png) no-repeat center center / contain;
					}
				}
				&.username{
					i{
						background: url(../../assets/images/icon-user@2x.png) no-repeat center center / contain;
					}
					
				}
			}
		}
	}
}
.event-detail{
	height: 100%;
	.detail-content{
		height: 100%;
		width: 600px;
		margin: 0 auto;
		.title{
			height: 100px;
			@include flexCenter;
			justify-content: flex-start;
			border-bottom: 1px solid #E5E5E5;
			span{
				font-size: 36px;
				font-weight: bold;
			}
			b{
				font-size: 20px;
				color: #fff;
				background: $color-blue;
				padding: 2px 10px;
				border-radius: 8px;
				margin-left: 10px;
			}
		}
		.status{
			margin: 30px 0;
			@include flexCenter;
			justify-content: flex-start;
			i{
				font-size: 30px;
				position: relative;
				top: -3px;
			}
			.process{
				@include flexCenter;
				margin: 0 10px;
				b{
					width: 4px;
					height: 20px;
					margin: 0 2px;
					transform: rotate(30deg);
				}
			}
			span{
				font-size: 24px;
			}
		}
		.detail{
			padding-bottom: 30px;
			@include flexCenter;
			justify-content: flex-start;
			border-bottom: 1px solid #E5E5E5;
			span{
				margin-right: 50px;
				font-size: 22px;
				@include flexCenter;
				i{
					width: 24px;
					height: 24px;
					margin-right: 5px;
				}
				b{
					font-weight: normal;
				}
				&.date{
					i{
						background: url(../../assets/images/icon-date@2x.png) no-repeat center center / contain;
					}
				}
				&.username{
					i{
						background: url(../../assets/images/icon-user@2x.png) no-repeat center center / contain;
					}
					
				}
			}
		}
		.scroll-main{
			height: calc(100% - 300px);
			overflow: auto;
			.sub-title{
				margin: 50px 0 20px;
				span{
					font-size: 28px;
					font-weight: bold;
					position: relative;
					&::after{
						content: "";
						width: 100%;
						height: 8px;
						background: linear-gradient(to right,rgba(50, 124, 254, .2),rgba(50, 124, 254, 1));
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
			}
			.feedback-item{
				font-size: 22px;
				color: #333;
				h3{
					font-weight: bold;
				}
			}
			.employes{
				li{
					margin-bottom: 20px;
					@include flexCenter;
					flex-direction: column;
					align-items: flex-start;
					span{
						font-size: 22px;
						margin-right: 10px;
					}
				}
			}
		}
	}
}
.event-section{
	height: 100%;
	position: relative;
	.map-section{
		height: 100%;
	}
	
	.event-main{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		pointer-events: none;
		.top-bar{
			height: 70px;
			background-color: #fff;
			pointer-events: all;
			@include flexCenter;
			justify-content: space-between;
			display: none;
			.sort-list{
				span{
					font-size: 24px;
					margin: 0 30px;
					position: relative;
					&.active{
						&::after{
							content: "";
							width: 100%;
							height: 8px;
							background: linear-gradient(to right,rgba(50, 124, 254, 0.2),rgba(50, 124, 254, 1));
							position: absolute;
							left: 0;
							bottom: 0;
						}
					}
				}
			}
			.filter-item{
				@include flexCenter;
				padding: 0 30px;
				border-left: 1px solid #D7D7D7;
				span{
					font-size: 24px;
				}
				i{
					font-size: 24px;
				}
			}
		}
		.event-content{
			width: 100%;
			pointer-events: all;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 99;
			.event-list{
				&.single{
					height: 260px;
					transition: all ease .3s;
				}
				&.list{
					height: calc(100vh - 270px);
					transition: all ease .3s;
					background: $bg-gray;
					.event-item{
						margin-bottom: 20px;
					}
				}
				.event-single{
					width: 660px;
					margin: 0 auto;
					position: relative;
					bottom: 10px;
					.list-btn{
						position: absolute;
						top: -80px;
						right: 0;
						width: 70px;
						height: 70px;
						border-radius: 50%;
						background: #fff;
						@include flexCenter;
						box-shadow: 0 0 10px rgba(0,0,0,.1);
						i{
							font-size: 40px;
						}
					}
				}
				.events{
					height: 100%;
					position: relative;
					.single-btn{
						position: absolute;
						top: -180px;
						left: 0;
						width: 100%;
						height: 180px;
						@include flexCenter;
						align-items: flex-end;
						i{
							transform: rotate(90deg) scaleY(1.5);
							font-size: 40px;
						}
					}
					.events-main{
						height: 100%;
						overflow: auto;
					}
				}
			}
		}
	}
}
</style>